<template>
  <div class="my-wrapper">
    <div>
      <div class="header">
        <div class="banner">
          <div class="avatar-wrapper">
            <img class="avatar" src="@/assets/image/icon.png"/>
          </div>
          <div v-if="!$store.state.token" @click="$router.push('/login')">
            <div>登录/注册</div>
          </div>
          <!-- 点击跳转到个人信息页面， -->
          <div v-else @click="$router.push('/profile')">
            <div class="nickname">{{$store.state.nickname}}</div>
            <div class="username">{{$store.state.username}}</div>
          </div>
          <!-- 点击跳转到个人信息页面 -->
        </div>
        <div class="middle">
          <div class="middle-list">
            <div class="middle-list-na">
              <div class="big">
                <span>6</span>
                <span>张</span>
              </div>
              <div>优惠价</div>
            </div>
            <div class="middle-list-na">
              <div class="big">
                <span>50</span>
              </div>
              <div>积分</div>
            </div>
            <div class="middle-list-na">
              <div class="big">
                <span>0</span>
                <span>元</span>
              </div>
              <div>抵用金</div>
            </div>
            <div class="middle-list-na">
              <div class="big"><i></i></div>
              <div>我的钱包</div>
            </div>
          </div>
        </div>
        <div class="checking">
          <img src="@/assets/image/icon.png" alt="" />
          <div>
            <p>完成实名认证</p>
            <span>为了更好的为您提供租车服务，请完成实名认证！</span>
          </div>
          <i></i>
        </div>
        <div class="identity">
          <p>常用功能</p>
          <div class="list-div">
            <div>
              <img
                src="https://static.wkzuche.com/H5/images/wechat/profile/auth.png"
                alt=""
              />
              <span>实名认证</span>
            </div>
            <div>
              <img
                src="https://static.wkzuche.com/H5/images/wechat/profile/question.png"
                alt=""
              />
              <span>常见问题</span>
            </div>
            <div>
              <img
                src="https://static.wkzuche.com/H5/images/wechat/profile/customer.png"
                alt=""
              />
              <span>联系客服</span>
            </div>
          </div>
        </div>
      </div>
      <div class="foot">
        <div class="foot-img">
          <img
            src="https://imgoss.wkzuche.com/banner/2020/1112/8b9ca4ab-8f93-4bb1-840f-99cb46d846d9.png"
            alt=""
          />
        </div>
        <div class="recommendImg">
          <img src="../../assets/image/recommend.png" alt="">
        </div>
        <div class="recommend">
          <recommend />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Recommend from "../home/components/Recommend.vue";
export default {
  components: { Recommend },
  data() {
    return {};
  },
  methods: {
    goto() {
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="scss" scoped>
.my-wrapper {
  width: 375px;
  background-color: #f6f6f9;
  margin-bottom: 50px;
  .header {
    background: #f6f6f9;
    margin-bottom: 20px;
    .banner {
      background-color: #ee4a4a;
      width: 100%;
      height: 140px;
      display: flex;
      align-items: center;
      color: #fff;
      .avatar-wrapper {
        width: 50px;
        height: 50px;
        border-radius: 25px;
        overflow: hidden;
        margin-right: 10px;
        margin-left: 10px;
        .avatar {
          width: 100%;
          height: 100%;
        }
      }
      .nickname {
        margin-bottom: 10px;
      }
    }
    .middle {
      font-size: 14px;
      background: rgb(255, 255, 255);
      height: 46px;
      padding: 20px 0 20px 0;
      margin-bottom: 12px;
      .middle-list {
        display: flex;
        align-items: center;
        .middle-list-na {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          i {
            display: block;
            width: 26px;
            height: 23px;
            background-image: url("https://static.wkzuche.com/H5/images/wechat/profile/money.png");
            background-size: contain;
          }
          .big {
            margin-bottom: 10px;
            font-size: 10px;
            span:nth-child(1) {
              font-size: 20px;
              font-weight: 700;
              margin-right: 5px;
              color: #474245;
            }
          }
          div:nth-child(2) {
            color: #4d4d4d;
            font-size: 10px;
          }
        }
      }
    }
    .checking {
      height: 38px;
      background: rgb(255, 255, 255);
      margin-bottom: 12px;
      padding: 20px 15px 20px 15px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      img {
        width: 24px;
        height: 27px;
        margin-right: 8px;
      }
      p {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
      }
      span {
        font-size: 12px;
      }
      i {
        display: inline-block;
        width: 11px;
        height: 11px;
        margin-left: 0.03rem;
        border: 1px solid #828282;
        border-right-color: transparent;
        border-bottom-color: transparent;
        transform: rotate(135deg);
      }
    }
    .identity {
      background-color: #fff;
      p {
        font-weight: 700;
        padding: 8px 0 8px 8px;
        color: #222;
        font-size: 14px;
        border-bottom: 0.01rem solid #e5e5e5;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }
      .list-div {
        display: flex;
        padding: 15px;
        div {
          flex: 1;
          text-align: center;
          img {
            width: 32px;
            height: 32px;
          }
          span {
            display: block;
            font-size: 12px;
          }
        }
      }
    }
  }
  .foot {
    background-color: #f6f6f9;
    .foot-img {
      height: 100px;
      margin-top: 12px;
      padding: 0 8px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .recommendImg {
      height: 100px;
      margin: 20px auto;
      width: 186px;
      height: 16px;
      img {
        width: 186px;
        height: 16px;
      }
    }
    .recommend {
      padding: 0 10px;
    }
  }
}
</style>